<template>
  <!-- 客服管理 -->
  <div>
    <el-button
      icon="el-icon-refresh"
      :loading="renewLoad"
      style="margin-top: 10px"
      type="primary"
      @click="getServiceList('renewLoad')"
    >
      更新
    </el-button>
    <!-- 客服信息展示列表 -->
    <el-table
      :data="tableData"
      :empty-text="emptyText"
      style="margin-top: 10px"
    >
      <el-table-column align="center" width="100">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column label="客服账户" prop="name" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" @click="sbt(scope.row)">
              查看接待
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="接入员工" :visible.sync="accessDialog">
      <div style="display: flex">
        <div style="width: 50%; border-right: 1px solid rgba(0, 0, 0, 0.1)">
          <el-tree
            ref="tree"
            :data="deptList"
            default-expand-all
            :props="defaultProps"
            @node-click="handleTreeNodeClick"
          />
        </div>
        <hr />
        <div style="width: 50%; padding: 10px">
          <div>已选择部门成员</div>
          <div v-for="(item, index) of selDeptList" :key="index"></div>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getDept, getService, getServiceAccount } from '@/api/qw'

  export default {
    props: {},
    data() {
      return {
        renewLoad: false,
        tableData: [],

        accessDialog: false, // 接入dialog显示隐藏
        deptList: [], // 员工列表
        defaultProps: {
          children: 'children',
          label: 'name',
        },

        emptyText: ' ',
        selDeptList: [], // 存放选中的员工
      }
    },
    mounted() {
      this.getServiceList()
    },
    methods: {
      // 获取接待列表
      getServiceList(btn) {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        this[btn] = true
        getService().then((res) => {
          this.tableData = res.data
          loading.close()
          this[btn] = false
          if (res.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      // 获取客服接待人员列表
      sbt(e) {
        getServiceAccount(e.id).then((res) => {
          this.accessDialog = true
          this.selDeptList = res.data
          getDept().then((res) => {
            this.deptList = res.data
          })
        })
      },
      // 树状结构点击节点事件
      handleTreeNodeClick(a, b, c) {
        console.log(a)
        console.log(b)
        console.log(c)
      },
    },
  }
</script>

<style scoped>
  ::v-deep .el-tree {
    height: 100%;
    font-weight: 600;
  }
  ::v-deep .el-tree-node__content {
    padding: 18px 0;
  }
</style>
